<script setup lang="ts">
import { ref, computed } from "vue"
import { isEqual } from "@pureadmin/utils"

let beforeVal = ref('')
let afterVal = ref('')
let isObjEqual = computed(() => {
  return isEqual(beforeVal.value, afterVal.value)
})

let options = [
  {
    label: '对象',
    key: '1',
    disabled: true,
    style: {
      color: '#c03f53'
    },
    children: [
      {
        label: "{ name: 'Tom', age: 16 }",
        value: "{ name: 'Tom', age: 16 }",
      },
      {
        label: "{ name: 'Tom', age: 20 }",
        value: "{ name: 'Tom', age: 20 }",
      },
      {
        label: "{ name: 'Mary', age: 18 }",
        value: "{ name: 'Mary', age: 18 }",
      },
      {
        label: "{ name: 'Tony', age: 18 }",
        value: "{ name: 'Tony', age: 18 }",
      }
    ]
  },
  {
    label: '数组',
    key: '2',
    disabled: true,
    style: {
      color: '#4b9d5f'
    },
    children: [
      {
        label: "[{ name: 'Tony', age: 16 }]",
        value: "[{ name: 'Tony', age: 16 }]",
      },
      {
        label: "[{ name: 'Tony', age: 20 }]",
        value: "[{ name: 'Tony', age: 20 }]",
      },
      {
        label: "[{ name: 'Alan', age: 18 }]",
        value: "[{ name: 'Alan', age: 18 }]",
      },
      {
        label: "[{ name: 'Mary', age: 18 }]",
        value: "[{ name: 'Mary', age: 18 }]",
      }
    ]
  },
  {
    label: '数字',
    key: '3',
    disabled: true,
    style: {
      color: '#3b81e8'
    },
    children: [
      {
        label: 20,
        value: 20,
      },
      {
        label: 24,
        value: 24
      }
    ]
  },
  {
    label: '字符串',
    key: '4',
    disabled: true,
    style: {
      color: '#e4a341'
    },
    children: [
      {
        label: '小哥哥，你真帅',
        value: '小哥哥，你真帅',
      },
      {
        label: '小姐姐，你真漂亮',
        value: '小姐姐，你真漂亮'
      }
    ]
  },
]
</script>

<template>
  <naive-theme>
    <n-space>
      <n-select :options="options" class="w-220px mt-2" v-model:value="beforeVal" />
      <span class="leading-50px">{{ isObjEqual ? '等于' : '不等于' }}</span>
      <n-select :options="options" class="w-220px mt-2" v-model:value="afterVal" />
    </n-space>
  </naive-theme>
</template>